<template>
  <view>

    <uni-card v-for="d in list">

      <view class="">
        {{ d.title }}
      </view>

      <view class="">
        {{ d.user.tbUser.username }}
        -
        <text :class="{'active':d.exInfo.praised}" @click="praise(d)">(￣▽￣)</text>
        <image @click="praise(d)" class="praised" v-if="d.exInfo.praised" src="../../static/praised.png"></image>
        <image @click="praise(d)" class="praised" v-if="!d.exInfo.praised" src="../../static/praise.png"></image>
        -
        <text>{{d.praise}}</text>
      </view>

    </uni-card>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    api,
    tools
  } from '../../js/api.js'

  onLoad(() => {
    query()
  })

  const info = ref('')
  const page = ref({
    pageSize: 10,
    pageNumber: 1
  })
  const list = ref([])

  const praise = (info) => {
    uni.showLoading({
      title: '操作中。。。'
    })
    console.log('需要点赞操作的信息:', info)
    api.post(`/message/praise/${info.mid}`, {}, (data) => {
      console.log('点赞的结果：', data)
      uni.hideLoading()
      if (data.success) {
        info.exInfo.praised = !info.exInfo.praised
        info.exInfo.praised ? info.praise++ : info.praise--
      }
    })
  }

  const query = () => {
    api.get(
      `/message/${page.value.pageSize}/${page.value.pageNumber}/1`, {
        info: info.value
      }, (data) => {
        if (data.success) {
          page.value = data.data.pageBean
          list.value = data.data.data
          return
        }
        uni.showModal({
          content: data.message
        })
      }
    )
  }
</script>

<style>
  .active {
    color: #ff0000;
  }

  .praised {
    width: 1rem;
    height: 1rem;
  }
</style>